<!-- AUI Framework -->
<!DOCTYPE html>
    <html>
    <head>

        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Fides Admin</title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <!-- Favicons -->

        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/icons/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icons/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icons/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="assets/images/icons/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="assets/images/icons/favicon.png" />

        <!--[if lt IE 9]>
          <script src="assets/js/minified/core/html5shiv.min.js"></script>
          <script src="assets/js/minified/core/respond.min.js"></script>
        <![endif]-->

        <!-- Fides Admin CSS Core -->

        <link rel="stylesheet" type="text/css" href="assets/css/minified/aui-production.min.css" />

        <!-- Theme UI -->

        <link id="layout-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/fides/color-schemes/dark-blue.min.css" />

        <!-- Fides Admin Responsive -->

        <link rel="stylesheet" type="text/css" href="assets/themes/minified/fides/common.min.css" />
        <link rel="stylesheet" type="text/css" href="assets/themes/minified/fides/responsive.min.css" />

        <!-- Fides Admin JS -->

        <script type="text/javascript" src="assets/js/minified/aui-production.min.js"></script>

        <script>
            jQuery(window).load(
                function(){

                    var wait_loading = window.setTimeout( function(){
                      $('#loading').slideUp('fast');
                      jQuery('body').css('overflow','auto');
                    },1000
                    );

                });

        </script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body style="overflow: hidden;">
        

        <div id="loading" class="ui-front loader ui-widget-overlay bg-white opacity-100">
            <img src="assets/images/loader-dark.gif" alt="" />
        </div>

        <div id="page-wrapper" class="demo-example">

            <div class="theme-customizer">
                <a href="javascript:;" class="change-theme-btn" title="Change theme">
                    <i class="glyph-icon icon-cog"></i>
                </a>
                <div class="theme-wrapper">

                    <div class="popover-title">Boxed layout options</div>
                    <div class="pad10A clearfix">
                        <a class="fluid-layout-btn hidden bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Full width layout</span></a>
                        <a class="boxed-layout-btn bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Boxed layout</span></a>
                    </div>
                    <div class="popover-title">Boxed layout backgrounds</div>
                    <div class="pad10A clearfix">
                        <a href="javascript:;" class="choose-bg" boxed-bg="#000" style="background: #000;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#333" style="background: #333;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#666" style="background: #666;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#888" style="background: #888;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#383d43" style="background: #383d43;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#fafafa" style="background: #fafafa; border: #ccc solid 1px;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#fff" style="background: #fff; border: #eee solid 1px;" title=""></a>
                    </div>
                    <div class="popover-title">Color schemes</div>
                    <div class="pad10A clearfix change-layout-theme">
                        <p class="font-gray-dark font-size-11 pad0B">More color schemes will be available soon!</p>
                        <div class="divider mrg10T mrg10B"></div>
                        <a href="javascript:;" class="choose-theme" layout-theme="dark-blue" title="">
                            <span style="background: #2381E9;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-blue" title="">
                            <span style="background: #2381E9;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme" layout-theme="dark-green" title="D">
                            <span style="background: #78CE12;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-green" title="D">
                            <span style="background: #78CE12;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme" layout-theme="dark-orange" title="">
                            <span style="background: #FF6041;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-orange" title="">
                            <span style="background: #FF6041;"></span>
                        </a>
                    </div>

                </div>
            </div>

            <div id="page-header" class="clearfix">
                <div id="header-logo">
                    <a href="javascript:;" class="tooltip-button" data-placement="bottom" title="Close sidebar" id="close-sidebar">
                        <i class="glyph-icon icon-caret-left"></i>
                    </a>
                    <a href="javascript:;" class="tooltip-button hidden" data-placement="bottom" title="Open sidebar" id="rm-close-sidebar">
                        <i class="glyph-icon icon-caret-right"></i>
                    </a>
                    <a href="javascript:;" class="tooltip-button hidden" title="Navigation Menu" id="responsive-open-menu">
                        <i class="glyph-icon icon-align-justify"></i>
                    </a>
                    Fides Admin <i class="opacity-80">1.1</i>
                </div>
                <div class="hide" id="black-modal-60" title="Modal window example">
                    <div class="pad20A">

                        <div class="infobox notice-bg">
                            <div class="bg-azure large btn info-icon">
                                <i class="glyph-icon icon-bullhorn"></i>
                            </div>
                            <h4 class="infobox-title">Modal windows</h4>
                            <p>Thanks to the solid modular Fides Admin arhitecture, modal windows customizations are very flexible and easy to apply.</p>
                        </div>

                        <h4 class="heading-1 mrg20T clearfix">
                            <div class="heading-content" style="width: auto;">
                                Icons
                                <small>
                                    All icons across the Fides Admin Framework use FontAwesome icons.
                                </small>
                            </div>
                            <div class="clear"></div>
                            <div class="divider"></div>
                        </h4>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-compass" href="../icon/compass"><i class="glyph-icon icon-compass"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-collapse" href="../icon/collapse"><i class="glyph-icon icon-collapse"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-collapse-top" href="../icon/collapse-top"><i class="glyph-icon icon-collapse-top"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-expand" href="../icon/expand"><i class="glyph-icon icon-expand"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-eur" href="../icon/eur"><i class="glyph-icon icon-eur"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-euro" href="../icon/eur"><i class="glyph-icon icon-euro"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-gbp" href="javascript:;"><i class="glyph-icon icon-gbp"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-usd" href="javascript:;"><i class="glyph-icon icon-usd"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-dollar" href="javascript:;"><i class="glyph-icon icon-dollar"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-inr" href="javascript:;"><i class="glyph-icon icon-inr"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-rupee" href="javascript:;"><i class="glyph-icon icon-rupee"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-jpy" href="javascript:;"><i class="glyph-icon icon-jpy"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-yen" href="javascript:;"><i class="glyph-icon icon-yen"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-cny" href="javascript:;"><i class="glyph-icon icon-cny"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-renminbi" href="javascript:;"><i class="glyph-icon icon-renminbi"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-krw" href="javascript:;"><i class="glyph-icon icon-krw"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-won" href="javascript:;"><i class="glyph-icon icon-won"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-btc" href="javascript:;"><i class="glyph-icon icon-btc"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-bitcoin" href="javascript:;"><i class="glyph-icon icon-bitcoin"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-file" href="javascript:;"><i class="glyph-icon icon-file"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-file-text" href="javascript:;"><i class="glyph-icon icon-file-text"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-alphabet" href="javascript:;"><i class="glyph-icon icon-sort-by-alphabet"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-alphabet-al" href="javascript:;"><i class="glyph-icon icon-sort-by-alphabet-alt"></i>t</a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-attributes" href="javascript:;"><i class="glyph-icon icon-sort-by-attributes"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-attribu" href="javascript:;"><i class="glyph-icon icon-sort-by-attributes-alt"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-order" href="javascript:;"><i class="glyph-icon icon-sort-by-order"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-order-alt" href="javascript:;"><i class="glyph-icon icon-sort-by-order-alt"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-thumbs-up" href="javascript:;"><i class="glyph-icon icon-thumbs-up"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-thumbs-down" href="javascript:;"><i class="glyph-icon icon-thumbs-down"></i></a>

                    </div>
                </div>

                <div class="hide" id="white-modal-80" title="Dialog with tabs">
                    <div class="tabs pad15A remove-border opacity-80">
                        <ul class="opacity-80">
                            <li><a href="#example-tabs-1">First</a></li>
                            <li><a href="#example-tabs-2">Second</a></li>
                            <li><a href="#example-tabs-3">Third</a></li>
                        </ul>
                        <div id="example-tabs-1">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </p>
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                        </div>
                        <div id="example-tabs-2">
                            <p>Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
                            </p>
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                        </div>
                        <div id="example-tabs-3">
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                        </div>
                    </div>
                    <div class="pad10A">
                        <div class="infobox success-bg radius-all-4">
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
                        </div>
                    </div>
                    <div class="ui-dialog-buttonpane clearfix">

                        <a href="dropdown_menus.html" class="btn medium float-left bg-azure">
                            <span class="button-content text-transform-upr font-size-11">Dropdown menus</span>
                        </a>
                        <div class="button-group float-right">
                            <a href="buttons.html" class="btn medium bg-black" title="View more buttons examples">
                                <i class="glyph-icon icon-star"></i>
                            </a>
                            <a href="buttons.html" class="btn medium bg-black" title="View more buttons examples">
                                <i class="glyph-icon icon-random"></i>
                            </a>
                            <a href="buttons.html" class="btn medium bg-black" title="View more buttons examples">
                                <i class="glyph-icon icon-map-marker"></i>
                            </a>
                        </div>
                        <a href="javascript:;" class="medium btn bg-blue-alt float-right mrg10R tooltip-button" data-placement="left" title="Remove comment">
                            <i class="glyph-icon icon-plus"></i>
                        </a>

                    </div>
                </div>
                <div class="user-profile dropdown">
                    <a href="javascript:;" title="" class="user-ico clearfix" data-toggle="dropdown">
                        <img width="36" src="assets/images/gravatar.jpg" alt="" />
                        <span>Horia Simon</span>
                        <i class="glyph-icon icon-chevron-down"></i>
                    </a>
                    <ul class="dropdown-menu float-right">
                        <li>
                            <a href="javascript:;" title="">
                                <i class="glyph-icon icon-user mrg5R"></i>
                                Account Details
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="">
                                <i class="glyph-icon icon-cog mrg5R"></i>
                                Edit Profile
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="">
                                <i class="glyph-icon icon-flag mrg5R"></i>
                                Notifications
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="">
                                <i class="glyph-icon icon-signout font-size-13 mrg5R"></i>
                                <span class="font-bold">Logout</span>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu float-left">
                            <a href="javascript:;" data-toggle="dropdown" title="">
                                Dropdown menu
                            </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="javascript:;" title="">
                                            Submenu 1
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" title="">
                                            Submenu 2
                                        </a>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a href="javascript:;" title="">
                                            Submenu 3
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="javascript:;" title="">
                                                    Submenu 2-1
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" title="">
                                                    Submenu 2-2
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="">
                                Another menu item
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="dropdown dash-menu">
                    <a href="javascript:;" data-toggle="dropdown" data-placement="left" class="medium btn primary-bg float-right popover-button-header hidden-mobile tooltip-button" title="Example menu">
                        <i class="glyph-icon icon-th"></i>
                    </a>
                    <div class="dropdown-menu float-right">
                        <div class="small-box">
                            <div class="pad10A dashboard-buttons clearfix">
                                <p class="font-gray-dark font-size-11 pad0B">This menu type can be used in pages, not just popovers.</p>
                                <div class="divider mrg10T mrg10B"></div>
                                <a href="javascript:;" class="btn vertical-button hover-blue-alt" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-dashboard opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Dashboard</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-green" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-tags opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Widgets</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-orange" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-reorder opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Tables</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-orange" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-bar-chart opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Charts</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-purple" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-laptop opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Buttons</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-azure" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-code opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Panels</span>
                                </a>
                            </div>

                            <div class="bg-gray text-transform-upr font-size-12 font-bold font-gray-dark pad10A">Dashboard menu</div>
                            <div class="pad10A dashboard-buttons clearfix">
                                <a href="javascript:;" class="btn vertical-button remove-border bg-blue" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-dashboard opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Dashboard</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-red" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-tags opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Widgets</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-purple" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-reorder opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Tables</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-azure" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-bar-chart opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Charts</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-yellow" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-laptop opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Buttons</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-orange" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-code opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Panels</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-icon-bar">
                    <div class="dropdown">

                        <a data-toggle="dropdown" href="javascript:;" title="">
                            <span class="badge badge-absolute bg-blue">8</span>
                            <i class="glyph-icon icon-lightbulb"></i>
                        </a>
                        <div class="dropdown-menu">

                            <div class="small-box">
                                <div class="popover-title">Boxed layout options</div>
                                <div class="pad10A clearfix">
                                    <a class="fluid-layout-btn hidden bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Full width layout</span></a>
                                    <a class="boxed-layout-btn bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Boxed layout</span></a>
                                </div>
                                <div class="popover-title">Boxed backgrounds</div>
                                <div class="pad10A clearfix">
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#000" style="background: #000;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#333" style="background: #333;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#666" style="background: #666;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#888" style="background: #888;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#383d43" style="background: #383d43;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#fafafa" style="background: #fafafa; border: #ccc solid 1px;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#fff" style="background: #fff; border: #eee solid 1px;" title=""></a>
                                </div>
                                <div class="popover-title">Color schemes</div>
                                <div class="pad10A clearfix change-layout-theme">
                                    <p class="font-gray-dark font-size-11 pad0B">More color schemes will be available soon!</p>
                                    <div class="divider mrg10T mrg10B"></div>
                                    <a href="javascript:;" class="choose-theme" layout-theme="dark-blue" title="">
                                        <span style="background: #2381E9;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-blue" title="">
                                        <span style="background: #2381E9;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme" layout-theme="dark-green" title="D">
                                        <span style="background: #78CE12;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-green" title="D">
                                        <span style="background: #78CE12;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme" layout-theme="dark-orange" title="">
                                        <span style="background: #FF6041;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-orange" title="">
                                        <span style="background: #FF6041;"></span>
                                    </a>
                                </div>

                                <div class="pad10A button-pane button-pane-alt text-center">
                                    <a href="javascript:;" class="btn medium bg-black">
                                        <span class="button-content text-transform-upr font-bold font-size-11">View all</span>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="dropdown">

                        <a data-toggle="dropdown" href="javascript:;" title="">
                            <span class="badge badge-absolute bg-orange">4</span>
                            <i class="glyph-icon icon-envelope-alt"></i>
                        </a>
                        <div class="dropdown-menu">

                            <div class="scrollable-content medium-box scrollable-small">

                                <ul class="no-border messages-box">
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <i class="glyph-icon icon-warning-sign font-red"></i>
                                                <a href="javascript:;" title="Message title">Important message</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <i class="glyph-icon icon-tag font-blue"></i>
                                                <a href="javascript:;" title="Message title">Some random email</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <a href="javascript:;" class="font-orange" title="Message title">Another received message</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <i class="glyph-icon icon-warning-sign font-red"></i>
                                                <a href="javascript:;" title="Message title">Important message</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <i class="glyph-icon icon-tag font-blue"></i>
                                                <a href="javascript:;" title="Message title">Some random email</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <a href="javascript:;" class="font-orange" title="Message title">Another received message</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                </ul>

                            </div>
                            <div class="pad10A button-pane button-pane-alt">
                                <a href="messaging.html" class="btn small float-left bg-white">
                                    <span class="button-content text-transform-upr font-size-11">All messages</span>
                                </a>
                                <div class="button-group float-right">
                                    <a href="javascript:;" class="btn small primary-bg">
                                        <i class="glyph-icon icon-star"></i>
                                    </a>
                                    <a href="javascript:;" class="btn small primary-bg">
                                        <i class="glyph-icon icon-random"></i>
                                    </a>
                                    <a href="javascript:;" class="btn small primary-bg">
                                        <i class="glyph-icon icon-map-marker"></i>
                                    </a>
                                </div>
                                <a href="javascript:;" class="small btn bg-red float-right mrg10R tooltip-button" data-placement="left" title="Remove comment">
                                    <i class="glyph-icon icon-remove"></i>
                                </a>
                            </div>

                        </div>
                    </div>
                    <div class="dropdown">

                        <a data-toggle="dropdown" href="javascript:;" title="">
                            <span class="badge badge-absolute bg-green">9</span>
                            <i class="glyph-icon icon-bell"></i>
                        </a>
                        <div class="dropdown-menu">

                            <div class="popover-title display-block clearfix form-row pad10A">
                                <div class="form-input">
                                    <div class="form-input-icon">
                                        <i class="glyph-icon icon-search transparent"></i>
                                        <input type="text" placeholder="Search notifications..." class="radius-all-100" name="" id="" />
                                    </div>
                                </div>
                            </div>
                            <div class="scrollable-content medium-box scrollable-small">

                                <ul class="no-border notifications-box">
                                    <li>
                                        <span class="btn bg-purple icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text">This is an error notification</span>
                                        <div class="notification-time">
                                            a few seconds ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="btn bg-orange icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text">This is a warning notification</span>
                                        <div class="notification-time">
                                            <b>15</b> minutes ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="bg-green btn icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text font-green font-bold">A success message example.</span>
                                        <div class="notification-time">
                                            <b>2 hours</b> ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="btn bg-purple icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text">This is an error notification</span>
                                        <div class="notification-time">
                                            a few seconds ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="btn bg-orange icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text">This is a warning notification</span>
                                        <div class="notification-time">
                                            <b>15</b> minutes ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="bg-blue btn icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text font-blue">Alternate notification styling.</span>
                                        <div class="notification-time">
                                            <b>2 hours</b> ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                            <div class="pad10A button-pane button-pane-alt text-center">
                                <a href="notifications.html" class="btn medium primary-bg">
                                    <span class="button-content">View all notifications</span>
                                </a>
                            </div>

                        </div>
                    </div>
                    <div class="dropdown">

                        <a data-toggle="dropdown" href="javascript:;" title="">
                            <span class="badge badge-absolute bg-red">2</span>
                            <i class="glyph-icon icon-tasks"></i>
                        </a>
                        <div class="dropdown-menu" id="progress-dropdown">

                            <div class="scrollable-content small-box scrollable-small">

                                <ul class="no-border progress-box">
                                    <li>
                                        <div class="progress-title">
                                            Finishing uploading files
                                            <b>23%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="23">
                                            <div class="progressbar-value bg-blue">
                                                <div class="progressbar-overlay"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Roadmap progress
                                            <b>91%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="91">
                                            <div class="progressbar-value primary-bg">
                                                <div class="progressbar-overlay"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Images upload
                                            <b>58%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="58">
                                            <div class="progressbar-value bg-blue-alt"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            WordPress migration
                                            <b>74%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="74">
                                            <div class="progressbar-value bg-purple"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Agile development procedures
                                            <b>91%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="91">
                                            <div class="progressbar-value primary-bg">
                                                <div class="progressbar-overlay"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Systems integration
                                            <b>58%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="58">
                                            <div class="progressbar-value bg-blue-alt"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Code optimizations
                                            <b>97%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="97">
                                            <div class="progressbar-value bg-yellow"></div>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                            <div class="pad10A button-pane button-pane-alt text-center">
                                <a href="notifications.html" class="btn medium font-normal bg-green">
                                    <span class="button-content">View all</span>
                                </a>
                            </div>

                        </div>
                    </div>
                </div>

            </div><!-- #page-header -->

            <div id="page-sidebar" class="scrollable-content">

                <div id="sidebar-menu">
                    <ul>
                        <li>
                            <a href="index.html" title="Dashboard">
                                <i class="glyph-icon icon-dashboard"></i>
                                Dashboard
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="Components">
                                <i class="glyph-icon icon-code"></i>
                                Components
                            </a>
                            <ul>
                                <li>
                                    <a href="dashboard_panels.html" title="Dashboard panels">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dashboard panels
                                    </a>
                                </li>
                                <li>
                                    <a href="social_boxes.html" title="Social boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Social boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="information_boxes.html" title="Information boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Information boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="chat.html" title="Chat">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Chat
                                    </a>
                                </li>
                                <li>
                                    <a href="notifications.html" title="Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="messaging.html" title="Messaging">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Messaging
                                    </a>
                                </li>
                                <li>
                                    <a href="progress_bars.html" title="Progress">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Progress
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Pages">
                                <i class="glyph-icon icon-folder-open"></i>
                                Pages
                            </a>
                            <ul>
                                <li>
                                    <a href="grid.html" title="Grid Layouts">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Grid Layouts
                                    </a>
                                </li>
                                <li>
                                    <a href="helper_classes.html" title="Helpers">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Helpers
                                    </a>
                                </li>
                                <li>
                                    <a href="login.html" title="Login">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Login example 1
                                    </a>
                                </li>
                                <li>
                                    <a href="login-alt.html" title="Login">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Login example 2
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Widgets">
                                <i class="glyph-icon icon-tags"></i>
                                Widgets
                            </a>
                            <ul>
                                <li>
                                    <a href="tabs.html" title="Tabs">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Tabs
                                    </a>
                                </li>
                                <li>
                                    <a href="accordions.html" title="Accordions">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Accordions
                                    </a>
                                </li>
                                <li>
                                    <a href="datepicker.html" title="Datepicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Datepicker
                                    </a>
                                </li>
                                <li>
                                    <a href="timepicker.html" title="Timepicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Timepicker
                                    </a>
                                </li>
                                <li>
                                    <a href="colorpicker.html" title="Colorpicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Colorpicker
                                    </a>
                                </li>
                                <li>
                                    <a href="slider.html" title="Sliders">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sliders
                                    </a>
                                </li>
                                <li>
                                    <a href="jgrowl_notifications.html" title="JGrowl Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        JGrowl Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="noty_notifications.html" title="Noty Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Noty Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="modal_windows.html" title="Modal Windows">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Modal Windows
                                    </a>
                                </li>
                                <li>
                                    <a href="tooltips.html" title="Tooltips">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Tooltips
                                    </a>
                                </li>
                                <li>
                                    <a href="popovers.html" title="Popovers">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Popovers
                                    </a>
                                </li>
                                <li>
                                    <a href="sortable.html" title="Sortable Elements">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sortable Elements
                                    </a>
                                </li>
                                <li>
                                    <a href="dropdown_menus.html" title="Dropdown Menus">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dropdown Menus
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Elements">
                                <i class="glyph-icon icon-laptop"></i>
                                Elements
                            </a>
                            <ul>
                                <li>
                                    <a href="content_boxes.html" title="Content Boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Content Boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="response_messages.html" title="Response Messages">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Response Messages
                                    </a>
                                </li>
                                <li>
                                    <a href="badges.html" title="Badges &amp; Labels">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Badges &amp; Labels
                                    </a>
                                </li>
                                <li>
                                    <a href="overlays.html" title="Overlays">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Overlays
                                    </a>
                                </li>
                                <li>
                                    <a href="navigation_menus.html" title="Navigation Menus">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Navigation Menus
                                    </a>
                                </li>
                                <li>
                                    <a href="icons.html" title="Icons">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Icons
                                    </a>
                                </li>
                                <li>
                                    <a href="buttons.html" title="Buttons">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Buttons
                                    </a>
                                </li>
                                <li>
                                    <a href="pagination.html" title="Pagination">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Pagination
                                    </a>
                                </li>
                                <li>
                                    <a href="typography.html" title="Typography">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Typography
                                    </a>
                                </li>
                                <li>
                                    <a href="animations.html" title="Animations">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Animations
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Charts">
                                <i class="glyph-icon icon-bar-chart"></i>
                                Charts
                            </a>
                            <ul>
                                <li>
                                    <a href="charts_piegauges.html" title="Pie Gauges">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Pie Gauges
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_justgage.html" title="JustGage">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        JustGage
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_sparklines.html" title="Sparklines">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sparklines
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_morris.html" title="Morris Charts">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Morris Charts
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Tables">
                                <i class="glyph-icon icon-table"></i>
                                Tables
                            </a>
                            <ul>
                                <li>
                                    <a href="tables.html" title="Normal tables">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Normal tables
                                    </a>
                                </li>
                                <li>
                                    <a href="tables_dynamic.html" title="Dynamic tables">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dynamic tables
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Forms">
                                <i class="glyph-icon icon-reorder"></i>
                                Forms
                            </a>
                            <ul>
                                <li>
                                    <a href="forms.html" title="Layouts &amp; Elements">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Layouts &amp; Elements
                                    </a>
                                </li>
                                <li>
                                    <a href="forms_validation.html" title="Forms validation">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Forms validation
                                    </a>
                                </li>
                                <li>
                                    <a href="form_wizard.html" title="Form wizard">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Form wizard
                                    </a>
                                </li>
                                <li>
                                    <a href="forms_inline.html" title="Inline editor">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Inline editor
                                    </a>
                                </li>
                                <li>
                                    <a href="image_editor.html" title="Image crop">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Image crop
                                    </a>
                                </li>
                                <li>
                                    <a href="file_upload.html" title="Files uploader">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Files uploader
                                    </a>
                                </li>
                                <li>
                                    <a href="dropzone_uploader.html" title="Dropzone uploader">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dropzone uploader
                                    </a>
                                </li>
                            </ul>
                        </li>
<!--                         <li>
                            <a href="javascript:;" title="Maps">
                                <i class="glyph-icon icon-map-marker"></i>
                                Maps
                            </a>
                            <ul>
                                <li>
                                    <a href="google_maps.html" title="Google Maps">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Google maps
                                    </a>
                                </li>
                                <li>
                                    <a href="vector_maps.html" title="Vector maps">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Vector maps
                                    </a>
                                </li>
                            </ul>
                        </li> -->
                        <li>
                            <a href="javascript:;" title="Help &amp; Support">
                                <i class="glyph-icon icon-book"></i>
                                Help &amp; Support
                            </a>
                            <ul>
                                <li>
                                    <a href="docs.html" title="Getting started guide">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Getting started guide
                                    </a>
                                </li>
                                <li>
                                    <a href="http://agileui.com/support-forums" title="Support forums">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Support forums
                                    </a>
                                </li>

                            </ul>
                        </li>
                    </ul>
                    <div class="divider mrg5T mobile-hidden"></div>
                    <div class="text-center mobile-hidden">
                        <div class="button-group display-inline">
                            <a href="javascript:;" class="btn medium bg-green tooltip-button" data-placement="top" title="Messages">
                                <i class="glyph-icon icon-flag"></i>
                            </a>
                            <a href="javascript:;" class="btn medium bg-green tooltip-button" data-placement="top" title="Mailbox">
                                <i class="glyph-icon icon-inbox"></i>
                            </a>
                            <a href="javascript:;" class="btn medium bg-green tooltip-button" data-placement="top" title="Content">
                                <i class="glyph-icon icon-hdd"></i>
                            </a>
                        </div>

                    </div>
                </div>

            </div><!-- #page-sidebar -->
            <div id="page-content-wrapper">
                <div id="page-title">

<h3>
    Buttons
    <small>
        You can transform any form submit elements or regular links into buttons by adding certain CSS classes for configuring the size, color and icon &amp; text alignment.
    </small>
</h3>
                    <div id="breadcrumb-right">
                        <div id="sidebar-search">
                            <input type="text" placeholder="Search..." class="autocomplete-input input tooltip-button" data-placement="bottom" title="Type &apos;jav&apos; to see the available tags..." id="" name="" />
                            <i class="glyph-icon icon-search"></i>
                        </div>
                        <div class="float-right">
                            <a href="javascript:;" class="btn medium bg-white tooltip-button black-modal-60 mrg5R" data-placement="bottom" title="Open modal window">
                                <span class="button-content">
                                    <i class="glyph-icon icon-question"></i>
                                </span>
                            </a>

                            <div class="dropdown">
                                <a href="javascript:;" class="btn medium bg-white" title="Example dropdown" data-toggle="dropdown">
                                    <span class="button-content">
                                        <i class="glyph-icon icon-cog float-left"></i>
                                        <i class="glyph-icon icon-caret-down float-right"></i>
                                    </span>
                                </a>
                                <div class="dropdown-menu pad0A float-right">
                                    <div class="medium-box">
                                        <div class="bg-gray text-transform-upr font-size-12 font-bold font-gray-dark pad10A">Form example</div>
                                        <div class="pad10A">
                                            <p class="font-gray-dark pad0B">This <span class="label bg-blue-alt">dropdown box</span> uses the Twitter Bootstrap dropdown plugin.</p>
                                            <div class="divider mrg10T mrg10B"></div>

                                                <form id="demo-form" action="" class="col-md-12" method="" />
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="">
                                                                Name:
                                                                <span class="required">*</span>
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <input type="text" id="email" name="email" data-type="email" data-trigger="change" data-required="true" class="parsley-validated" />
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="">
                                                                Email:
                                                                <span class="required">*</span>
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <input type="text" id="email" name="email" data-type="email" data-trigger="change" data-required="true" class="parsley-validated" />
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="">
                                                                Website:
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <input type="text" id="website" name="website" data-trigger="change" data-type="url" class="parsley-validated" />
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="" class="label-description">
                                                                Message:
                                                                <span>20 chars min, 200 max</span>
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]" class="parsley-validated"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="divider"></div>
                                                    <div class="form-row">
                                                        <input type="hidden" name="superhidden" id="superhidden" />
                                                        <div class="form-input col-md-8 col-md-offset-4">
                                                            <a href="javascript:;" class="btn medium primary-bg radius-all-4" id="demo-form-valid" onclick="javascript:$(&apos;#demo-form&apos;).parsley( &apos;validate&apos; );" title="Validate!">
                                                                <span class="button-content">
                                                                    Validate the form above
                                                                </span>
                                                            </a>
                                                        </div>
                                                    </div>

                                                </form>

                                        </div>

                                        <div class="bg-black font-size-12 font-orange pad10A mrg5L mrg5R">Custom header example</div>
                                        <div class="pad15A">
                                            <p class="font-green text-center font-size-14 pad0B">Fides Admin comes with powerful helpers that you can use to create virtually any style you want. Read the documentation about helper classes to find out more!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
</div><!-- #page-title -->
<div id="page-content">



<h3>Basic</h3>
<p class="font-gray-dark">
    The button examples below are the most basic ones, without any icons or additional styles applied.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="#" class="btn medium primary-bg" title="">
            <span class="button-content">Primary</span>
        </a>

        <a href="#" class="btn medium ui-state-default" title="">
            <span class="button-content">Secondary</span>
        </a>

        <a href="#" class="btn medium transparent no-shadow" title="">
            <span class="button-content">Transparent</span>
        </a>

        <a href="#" class="btn medium bg-blue" title="">
            <span class="button-content">Blue</span>
        </a>

        <a href="#" class="btn medium bg-blue-alt" title="">
            <span class="button-content">Blue Alt</span>
        </a>

        <a href="#" class="btn medium bg-yellow" title="">
            <span class="button-content">Yellow</span>
        </a>

        <a href="#" class="btn medium bg-green" title="">
            <span class="button-content">Green</span>
        </a>

        <a href="#" class="btn medium bg-orange" title="">
            <span class="button-content">Orange</span>
        </a>

        <a href="#" class="btn medium bg-purple" title="">
            <span class="button-content">Purple</span>
        </a>

        <a href="#" class="btn medium bg-azure" title="">
            <span class="button-content">Azure</span>
        </a>

        <a href="#" class="btn medium bg-black" title="">
            <span class="button-content">Black</span>
        </a>

        <a href="#" class="btn medium bg-gray" title="">
            <span class="button-content">Gray</span>
        </a>

        <a href="#" class="btn medium bg-white" title="">
            <span class="button-content">White</span>
        </a>

    </div>

    

</div>


<h3>Hover to background</h3>
<p class="font-gray-dark">
    The hover to background buttons have background colors only on hover, otherwise they are either white or transparent.
</p>
<div class="example-box">
    <div class="example-code">

                <a href="#" class="btn medium hover-blue" title="">
                    <span class="button-content">Blue</span>
                </a>

                <a href="#" class="btn medium hover-blue-alt" title="">
                    <span class="button-content">Blue Alt</span>
                </a>

                <a href="#" class="btn medium hover-yellow" title="">
                    <span class="button-content">Yellow</span>
                </a>

                <a href="#" class="btn medium hover-green" title="">
                    <span class="button-content">Green</span>
                </a>

                <a href="#" class="btn medium hover-orange" title="">
                    <span class="button-content">Orange</span>
                </a>

                <a href="#" class="btn medium hover-purple" title="">
                    <span class="button-content">Purple</span>
                </a>

                <a href="#" class="btn medium hover-azure" title="">
                    <span class="button-content">Azure</span>
                </a>

                <a href="#" class="btn medium hover-black" title="">
                    <span class="button-content">Black</span>
                </a>

                <a href="#" class="btn medium hover-gray" title="">
                    <span class="button-content">Gray</span>
                </a>

                <a href="#" class="btn medium hover-white" title="">
                    <span class="button-content">White</span>
                </a>

    </div>

    

</div>


<h3>Font color</h3>
<p class="font-gray-dark">
    You can use the font color helpers included in the core to create all kinds of elements. In this case, we prepared an example using buttons.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="#" class="btn medium bg-gray font-blue" title="">
            <span class="button-content">.font-blue</span>
        </a>

        <a href="#" class="btn medium bg-gray font-red" title="">
            <span class="button-content">.font-red</span>
        </a>

        <a href="#" class="btn medium bg-gray font-orange" title="">
            <span class="button-content">.font-orange</span>
        </a>

        <a href="#" class="btn medium bg-gray font-green" title="">
            <span class="button-content">.font-green</span>
        </a>

        <a href="#" class="btn medium bg-gray font-black" title="">
            <span class="button-content">.font-black</span>
        </a>

        <a href="#" class="btn medium bg-gray font-gray" title="">
            <span class="button-content">.font-gray</span>
        </a>

        <a href="#" class="btn medium bg-gray font-purple" title="">
            <span class="button-content">.font-purple</span>
        </a>

        <a href="#" class="btn medium bg-gray font-azure" title="">
            <span class="button-content">.font-azure</span>
        </a>

        <a href="#" class="btn medium bg-gray font-blue-alt" title="">
            <span class="button-content">.font-blue-alt</span>
        </a>

        <a href="#" class="btn medium bg-gray font-gray-dark" title="">
            <span class="button-content">.font-gray-dark</span>
        </a>

        <a href="#" class="btn medium bg-black font-white" title="">
            <span class="button-content">.font-white</span>
        </a>

    </div>

    

</div>

<h3>
    Sizes
</h3>
<p class="font-gray-dark">
    Buttons can have four different sizes: <b>small</b>, <b>medium</b>, <b>large</b> and <b>x-large</b>.
</p>
<div class="example-box">
    <div class="example-code">
        <a href="#" class="btn small primary-bg" title="">
            <span class="button-content">Small button</span>
        </a>

        <a href="#" class="btn medium primary-bg" title="">
            <span class="button-content">Medium button</span>
        </a>

        <a href="#" class="btn large primary-bg" title="">
            <span class="button-content">Large button</span>
        </a>

        <a href="#" class="btn x-large primary-bg" title="">
            <span class="button-content">X-Large button</span>
        </a>
    </div>
    
</div>

<h3>
    Buttons with one icon
</h3>
<p class="font-gray-dark">
    To create this kind of button you have to replace the <b>.button-content</b> element with the icon wrapper which is identified by having any CSS class starting with <b>.icon-</b>. If you want the icon buttons to be perfectly square you shoudn't include the icon wrapper in the <b>.button-content</b> element (example below).
</p>

<div class="example-box">
    <div class="example-code">
        <a href="#" class="btn small primary-bg" title="">
            <i class="glyph-icon icon-cloud-download"></i>
        </a>
        <a href="#" class="btn medium primary-bg" title="">
            <i class="glyph-icon icon-cloud-download"></i>
        </a>
        <a href="#" class="btn large primary-bg" title="">
            <i class="glyph-icon icon-cloud-download"></i>
        </a>
        <a href="#" class="btn x-large primary-bg" title="">
            <i class="glyph-icon icon-cloud-download"></i>
        </a>
    </div>
    
</div>

<h3>Buttons with two icons</h3>
<p class="font-gray-dark">
    This kind of buttons are very useful if you want to create drop downs &amp; similar stuff. Read more on how to change the actual icon size below.
</p>

<div class="example-box">
    <div class="example-code">
        <a href="javascript:;" class="btn small primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                <i class="glyph-icon icon-caret-down float-right"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn medium primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                <i class="glyph-icon icon-caret-down float-right"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn large primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                <i class="glyph-icon icon-caret-down float-right"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn x-large primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                <i class="glyph-icon icon-caret-down float-right"></i>
            </span>
        </a>
    </div>
    
</div>

<h3>Buttons with two icons &amp; separator</h3>
<p class="font-gray-dark">
    You can add a separator to one of the icons for better user experience or just because you like it better that way :)
</p>

<div class="example-box">
    <div class="example-code">
        <a href="javascript:;" class="btn small primary-bg">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
            <span class="button-content">
                <i class="glyph-icon icon-cog"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn medium primary-bg">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
            <span class="button-content">
                <i class="glyph-icon icon-cog"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn large primary-bg">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
            <span class="button-content">
                <i class="glyph-icon icon-cog"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn x-large primary-bg">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
            <span class="button-content">
                <i class="glyph-icon icon-cog"></i>
            </span>
        </a>

        <a href="javascript:;" class="btn x-large primary-bg">
              <span class="glyph-icon icon-separator float-left">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
            <span class="button-content">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
        </a>

        <a href="javascript:;" class="btn x-large primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn large primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn medium primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn small primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
        </a>
    </div>
    
</div>

<h3>Icons colors</h3>
<p class="font-gray-dark">
    You can use the font color helpers included in the core to change the icon colors.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="#" class="btn medium bg-white" title="">
            <span class="button-content">
                <i class="glyph-icon icon-cog font-blue"></i>
            </span>
        </a>

        <a href="#" class="btn medium bg-white" title="">
            <span class="button-content">
                <i class="glyph-icon icon-cog font-red"></i>
            </span>
        </a>

        <a href="#" class="btn medium bg-white" title="">
            <span class="button-content">
                <i class="glyph-icon icon-cog font-orange"></i>
            </span>
        </a>

        <a href="#" class="btn medium bg-white" title="">
            <span class="button-content">
                <i class="glyph-icon icon-cog font-green"></i>
            </span>
        </a>

        <a href="#" class="btn medium bg-white" title="">
            <span class="button-content">
                <i class="glyph-icon icon-cog font-black"></i>
            </span>
        </a>

        <a href="#" class="btn medium bg-white" title="">
            <span class="button-content">
                <i class="glyph-icon icon-cog font-gray"></i>
            </span>
        </a>

        <a href="#" class="btn medium bg-white" title="">
            <span class="button-content">
                <i class="glyph-icon icon-cog font-gray-dark"></i>
            </span>
        </a>

        <a href="#" class="btn medium bg-black" title="">
            <span class="button-content">
                <i class="glyph-icon icon-cog font-white"></i>
            </span>
        </a>
    </div>

    

</div>

<h3>Border radius helpers</h3>
<p class="font-gray-dark">
    You can use the border radius helpers included in the core to change the CSS3 border radius of the elements, in this case, icon buttons. The border radius helper classes can be applied to either all borders or only specific borders (eg. top right, bottom left &amp; right, etc)
</p>
<div class="example-box">
    <div class="example-code">

        <a href="#" class="btn medium primary-bg mrg15R" title="">
            <span class="button-content">
                default border radius
            </span>
        </a>

        <a href="#" class="btn medium primary-bg radius-all-100" title="">
            <span class="button-content">
                100px border radius
            </span>
        </a>

        <a href="#" class="btn medium primary-bg radius-all-10" title="">
            <span class="button-content">
                10px border radius
            </span>
        </a>

        <a href="#" class="btn medium primary-bg radius-all-8" title="">
            <span class="button-content">
                8px border radius
            </span>
        </a>

        <a href="#" class="btn medium primary-bg radius-all-6" title="">
            <span class="button-content">
                6px border radius
            </span>
        </a>

        <a href="#" class="btn medium primary-bg radius-all-4" title="">
            <span class="button-content">
                4px border radius
            </span>
        </a>

        <a href="#" class="btn medium primary-bg radius-all-2" title="">
            <span class="button-content">
                2px border radius
            </span>
        </a>

        <a href="#" class="btn medium primary-bg radius-all-0" title="">
            <span class="button-content">
                0px border radius
            </span>
        </a>

    </div>

    

</div>

<h3>
    Regular buttons
</h3>
<p class="font-gray-dark">
    Regular buttons have a single line of text with or without one or two icons aligned left or right.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="javascript:;" class="btn medium primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                Left icon
            </span>
        </a>

        <a href="javascript:;" class="btn medium primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-right"></i>
                Right icon
            </span>
        </a>

        <a href="javascript:;" class="btn medium primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                <span class="float-left">Both icons</span>
                <i class="glyph-icon icon-cog float-right"></i>
            </span>
        </a>

    </div>

    

</div>

<h3>
    Icon separators
</h3>
<p class="font-gray-dark">
    You can add to a regular button with text a separator to the left, right or both icons.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="javascript:;" class="btn medium primary-bg">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="button-content">
                Left icon
            </span>
        </a>

        <a href="javascript:;" class="btn medium primary-bg">
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="button-content">
                Right icon
            </span>
        </a>

        <a href="javascript:;" class="btn medium primary-bg">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="button-content">
                Both icons
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-cog"></i>
            </span>
        </a>

    </div>

    

</div>

<h3>
    Icon separators &amp; normal icons
</h3>
<p class="font-gray-dark">
    You can add to a regular button with text, beside a separator to the left, right or both icons, another left, right or both icon.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="javascript:;" class="btn medium primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                Button
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn medium primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-right"></i>
                Button
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn medium primary-bg">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                <span class="float-left">Button</span>
                <i class="glyph-icon icon-cog float-right"></i>
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
        </a>
        <a href="javascript:;" class="btn medium primary-bg">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                Button
            </span>
        </a>
        <a href="javascript:;" class="btn medium primary-bg">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
            <span class="button-content">
                <i class="glyph-icon icon-cog float-right"></i>
                Button
            </span>
        </a>
        <a href="javascript:;" class="btn medium primary-bg">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-caret-down"></i>
            </span>
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                <span class="float-left">Button</span>
                <i class="glyph-icon icon-cog float-right"></i>
            </span>
        </a>

    </div>

    

</div>

<h3>
    Vertical icon buttons
</h3>
<p class="font-gray-dark">
    You can also create vertical icon buttons by replacing the SIZE (.small, .medium, .large, .x-large) class with <b>.vertical-button</b> class.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="javascript:;" class="btn vertical-button primary-bg" title="">
            <i class="glyph-icon icon-cog"></i>
            <span class="button-content">Top icon</span>
        </a>

        <a href="javascript:;" class="btn vertical-button primary-bg" title="">
            <span class="button-content">Bottom icon</span>
            <i class="glyph-icon icon-cog"></i>
        </a>

        <a href="javascript:;" class="btn vertical-button primary-bg" title="">
            <i class="glyph-icon icon-cog"></i>
            <span class="button-content">Both icons</span>
            <i class="glyph-icon icon-cog"></i>
        </a>

    </div>

    

</div>

<h3>
    Double buttons
</h3>
<p class="font-gray-dark">
    Double buttons are regular buttons with two lines of text. They can have no icons, one left/right icon or both icons.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="javascript:;" class="btn double-button primary-bg">
            <span class="button-content">
                No icon
                <span>Double button without icon</span>
            </span>
        </a>
        <a href="javascript:;" class="btn double-button primary-bg">
            <i class="glyph-icon icon-cog float-left"></i>
            <span class="button-content">
                Left icon
                <span>Lorem ipsum dolor</span>
            </span>
        </a>
        <a href="javascript:;" class="btn double-button primary-bg">
            <i class="glyph-icon icon-cog float-right"></i>
            <span class="button-content">
                Right icon
                <span>Lorem ipsum dolor</span>
            </span>
        </a>
        <a href="javascript:;" class="btn double-button primary-bg">
            <i class="glyph-icon icon-cog float-left"></i>
            <span class="button-content">
                Both icons
                <span>Lorem ipsum dolor</span>
            </span>
            <i class="glyph-icon icon-cog float-right"></i>
        </a>

    </div>

    

</div>

<h3>
    Icon separators
</h3>
<p class="font-gray-dark">
    Double buttons can have left, right or both icons with separators.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="javascript:;" class="btn double-button primary-bg">
            <span class="glyph-icon icon-separator float-left">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="button-content">
                Left icon
                <span>Lorem ipsum dolor</span>
            </span>
        </a>
        <a href="javascript:;" class="btn double-button primary-bg">
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="button-content">
                Right icon
                <span>Lorem ipsum dolor</span>
            </span>
        </a>
        <a href="javascript:;" class="btn double-button primary-bg">
            <span class="glyph-icon icon-separator float-left">
                <i class="glyph-icon icon-cog"></i>
            </span>
            <span class="button-content">
                Both icons
                <span>Lorem ipsum dolor</span>
            </span>
            <span class="glyph-icon icon-separator float-right">
                <i class="glyph-icon icon-cog"></i>
            </span>
        </a>

    </div>

    

</div>

<h3>
    Horizontal groups
</h3>
<p class="font-gray-dark">
    Button groups help you create split buttons, paginations and toolbars. You must put at least two buttons inside, otherwise there is no point in using a button group. To create horizontal button group you have to wrap the buttons in a div with class <b>button-group</b>. If the themes has border-radiuses defined, the button groups with add the necessary radiuses to the first and last button.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <div class="button-group float-left mrg15R">
            <a href="javascript:;" class="btn medium ui-state-default">
                <i class="glyph-icon icon-backward"></i>
            </a>
            <a href="javascript:;" class="btn medium ui-state-default">
                <i class="glyph-icon icon-pause"></i>
            </a>
            <a href="javascript:;" class="btn medium ui-state-default">
                <i class="glyph-icon icon-forward"></i>
            </a>
        </div>

        <div class="button-group">
            <a href="javascript:;" class="btn medium primary-bg">
                <i class="glyph-icon icon-eject font-size-13"></i>
            </a>
            <a href="javascript:;" class="btn medium primary-bg">
                <i class="glyph-icon icon-play font-size-13"></i>
            </a>
            <a href="javascript:;" class="btn medium primary-bg">
                <i class="glyph-icon icon-stop font-size-13"></i>
            </a>
            <a href="javascript:;" class="btn medium primary-bg">
                <i class="glyph-icon icon-pause font-size-13"></i>
            </a>
            <a href="javascript:;" class="btn medium primary-bg">
                <i class="glyph-icon icon-fast-backward font-size-13"></i>
            </a>
            <a href="javascript:;" class="btn medium primary-bg">
                <i class="glyph-icon icon-fast-forward font-size-13"></i>
            </a>
        </div>

    </div>
    
</div>

<h3>
    Horizontal dropdowns
</h3>
<p class="font-gray-dark">
    You can use the horizontal button groups to create split buttons of different sizes &amp; colors.
</p>

<div class="infobox warning-bg">
    <i class="glyph-icon icon-thumbs-up-alt float-left mrg5R"></i>
    <p>Learn more about all the options for creating dropdown menus by reading the <a href="dropdown_menus.html" target="_blank" title="Fides Admin Dropdowns documentation">Fides Admin Dropdowns documentation</a> page.</p>
</div>

<div class="example-box">
    <div class="example-code clearfix">

        <div class="button-group dropdown">
            <a href="javascript:;" class="btn medium bg-black" title="">
                <span class="button-content">Example 1</span>
            </a>
            <a href="javascript:;" class="btn medium bg-black">
                <i class="glyph-icon icon-angle-down"></i>
            </a>
        </div>

        <div class="button-group dropdown">
            <a href="javascript:;" class="btn medium bg-black" title="">
                <span class="button-content">Example 2</span>
            </a>
            <a href="javascript:;" class="btn medium bg-purple">
                <i class="glyph-icon icon-caret-down"></i>
            </a>
        </div>

        <div class="button-group dropdown">
            <a href="javascript:;" class="btn medium primary-bg" title="">
                <span class="button-content">Example 3</span>
            </a>
            <a href="javascript:;" class="btn medium primary-bg" data-toggle="dropdown">
                <span class="glyph-icon icon-separator float-right">
                    <i class="glyph-icon icon-angle-down"></i>
                </span>
            </a>
            <ul class="dropdown-menu float-right">
                <li>
                    <a href="javascript:;" title="">
                        Another menu 1
                    </a>
                </li>
                <li>
                    <a href="javascript:;" title="">
                        Another menu 2
                    </a>
                </li>
                <li>
                    <a href="javascript:;" title="">
                        Another menu 3
                    </a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                    <a href="breadcrumb.html" data-toggle="dropdown" title="">
                        Dropdown 1
                    </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:;" title="">
                                    Submenu 1
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;" title="">
                                    Submenu 2
                                </a>
                            </li>
                            <li class="dropdown-submenu">
                                <a href="javascript:;" title="">
                                    Submenu 3
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="javascript:;" title="">
                                            Submenu 2-1
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" title="">
                                            Submenu 2-2
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                </li>
                <li>
                    <a href="javascript:;" title="">
                        Another menu 4
                    </a>
                </li>
                <li>
                    <a href="javascript:;" title="">
                        Another menu 5
                    </a>
                </li>

            </ul>
        </div>

    </div>
    
</div>

<h3>
    Vertical groups
</h3>
<p class="font-gray-dark">
    To create horizontal button groups you have to wrap the buttons in a div with class .button-group. If the themes has border-radiuses defined, the button groups with add the necessary radiuses to the first and last button.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <div class="button-group-vertical float-left mrg15R">
            <a href="javascript:;" class="btn medium ui-state-default">
                <span class="button-content">
                    <i class="glyph-icon icon-cog float-left mrg10R"></i>
                    Button 1
                </span>
                <span class="glyph-icon icon-separator float-right">
                    <i class="glyph-icon icon-caret-right"></i>
                </span>
            </a>
            <a href="javascript:;" class="btn medium ui-state-default">
                <span class="button-content">
                    <i class="glyph-icon icon-cog float-left mrg10R"></i>
                    Button 2
                </span>
                <span class="glyph-icon icon-separator float-right">
                    <i class="glyph-icon icon-caret-right"></i>
                </span>
            </a>
            <a href="javascript:;" class="btn medium ui-state-default">
                <span class="button-content">
                    <i class="glyph-icon icon-cog float-left mrg10R"></i>
                    Button 3
                </span>
                <span class="glyph-icon icon-separator float-right">
                    <i class="glyph-icon icon-caret-right"></i>
                </span>
            </a>
            <a href="javascript:;" class="btn medium ui-state-default">
                <span class="button-content">
                    <i class="glyph-icon icon-cog float-left mrg10R"></i>
                    Button 4
                </span>
                <span class="glyph-icon icon-separator float-right">
                    <i class="glyph-icon icon-caret-right"></i>
                </span>
            </a>
        </div>

        <div class="button-group-vertical float-left">
            <a href="javascript:;" class="btn double-button primary-bg">
                <span class="glyph-icon icon-separator float-right">
                    <i class="glyph-icon icon-chevron-right font-size-13"></i>
                </span>
                <span class="button-content">
                    Button 1
                    <span>Lorem ipsum dolor sic amet</span>
                </span>
            </a>
            <a href="javascript:;" class="btn double-button primary-bg">
                <span class="glyph-icon icon-separator float-right">
                    <i class="glyph-icon icon-chevron-right font-size-13"></i>
                </span>
                <span class="button-content">
                    Button 2
                    <span>Lorem ipsum dolor sic amet</span>
                </span>
            </a>
            <a href="javascript:;" class="btn double-button primary-bg">
                <span class="glyph-icon icon-separator float-right">
                    <i class="glyph-icon icon-chevron-right font-size-13"></i>
                </span>
                <span class="button-content">
                    Button 2
                    <span>Lorem ipsum dolor sic amet</span>
                </span>
            </a>
        </div>

    </div>
    
</div>

<h3>
    Horizontal block level groups
</h3>
<p class="font-gray-dark">
    You can create block level button groups by wrapping buttons inside a div with class <b>.button-block</b>.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <div class="button-block">
            <a href="javascript:;" class="btn medium primary-bg">
                <span class="button-content">
                    <i class="glyph-icon icon-cog float-left"></i>
                    Button 1
                </span>
            </a>
            <a href="javascript:;" class="btn medium primary-bg">
                <span class="button-content">
                    <i class="glyph-icon icon-cog float-left"></i>
                    Button 2
                </span>
                <span class="glyph-icon icon-separator float-right">
                    <i class="glyph-icon icon-caret-down"></i>
                </span>
            </a>
            <a href="javascript:;" class="btn medium primary-bg">
                <span class="button-content">
                    <i class="glyph-icon icon-cog float-left"></i>
                    Button 3
                </span>
            </a>
        </div>

    </div>
    
</div>

<h3>
    Single block level button
</h3>
<p class="font-gray-dark">
    If you want only one button to have block level behaviour or do not want to use the .button-block wrapper, you can add the following classes to a button to make it block level: <b>display-block</b> and <b>float-none</b> (not required, but good to have)
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <a href="javascript:;" class="btn medium display-block float-none primary-bg" title="">
            <span class="button-content">
                <i class="glyph-icon icon-cog float-left"></i>
                Single block level button
            </span>
        </a>

    </div>
    
</div>

<h3>
    Justified block level groups
</h3>
<p class="font-gray-dark">
    You can create justified block level button groups by wrapping buttons inside a div with class <b>.button-block-justified</b>.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <div class="button-block-justified">
            <ul>
                <li>
                    <a href="javascript:;" class="btn medium primary-bg" title="">
                        <i class="glyph-icon icon-cog mrg5R"></i>
                        Button 1
                    </a>
                </li>
                <li>
                    <a href="javascript:;" class="btn medium primary-bg" title="">
                        <i class="glyph-icon icon-cog mrg5R"></i>
                        Button 2
                    </a>
                </li>
                <li>
                    <a href="javascript:;" class="btn medium primary-bg" title="">
                        <i class="glyph-icon icon-cog mrg5R"></i>
                        Button 3
                    </a>
                </li>
            </ul>
        </div>

    </div>
    
</div>

<h3>
    Disabled states
</h3>
<p class="font-gray-dark">
    Beside the normal, active, focus, hover we all know that buttons also have a disabled state. You can disable a button in two ways: using the <b>.disabled</b> class for links or adding the <b>disabled</b> attribute to form buttons.
</p>
<div class="example-box">
    <div class="example-code">
        <a href="#" class="btn medium primary-bg disabled" title="">
            <span class="button-content">Link button</span>
        </a>
        <button class="btn medium primary-bg" disabled="">
            <span class="button-content">Form submit button</span>
        </button>
        <a href="#" class="btn medium ui-state-default disabled" title="">
            <span class="button-content">Link button</span>
        </a>
        <button class="btn medium ui-state-default" disabled="">
            <span class="button-content">Form submit button</span>
        </button>
    </div>
    
</div>

<h3>
    Custom elements
</h3>
<p class="font-gray-dark">
    All examples below were creating using only the existing styling &amp; helper CSS classes.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="#" class="heading-1 bg-black btn text-left display-block pad10A clearfix">
            <i class="bg-blue-alt radius-all-100 glyph-icon icon-tags heading-icon"></i>
            <div class="heading-content font-white">
                Heading H4 with custom style
                <small>
                    This is an example description for the heading with icon. You can use the color helper classes to style any way you want both the actual heading and the icon.
                </small>
            </div>
        </a>

    </div>
    
</div>

<h3>
    Twitter, Facebook, Google buttons
</h3>
<p class="font-gray-dark">
    We created special styles for Twitter, Facebook, Google buttons.
</p>
<div class="example-box">
    <div class="example-code">

        <a href="javascript:;" class="btn small bg-facebook">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-facebook"></i>
            </span>
            <span class="button-content">
                Facebook
            </span>
        </a>

        <a href="javascript:;" class="btn medium bg-facebook">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-facebook"></i>
            </span>
            <span class="button-content">
                Facebook
            </span>
        </a>

        <a href="javascript:;" class="btn large bg-facebook">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-facebook"></i>
            </span>
            <span class="button-content">
                Facebook
            </span>
        </a>

        <a href="javascript:;" class="btn x-large bg-facebook">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-facebook"></i>
            </span>
            <span class="button-content">
                Facebook
            </span>
        </a>

        <br /><br />

        <a href="javascript:;" class="btn small bg-twitter">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-twitter"></i>
            </span>
            <span class="button-content">
                Twitter
            </span>
        </a>

        <a href="javascript:;" class="btn medium bg-twitter">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-twitter"></i>
            </span>
            <span class="button-content">
                Twitter
            </span>
        </a>

        <a href="javascript:;" class="btn large bg-twitter">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-twitter"></i>
            </span>
            <span class="button-content">
                Twitter
            </span>
        </a>

        <a href="javascript:;" class="btn x-large bg-twitter">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-twitter"></i>
            </span>
            <span class="button-content">
                Twitter
            </span>
        </a>

        <br /><br />

        <a href="javascript:;" class="btn small bg-google">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-google-plus"></i>
            </span>
            <span class="button-content">
                Google
            </span>
        </a>

        <a href="javascript:;" class="btn medium bg-google">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-google-plus"></i>
            </span>
            <span class="button-content">
                Google
            </span>
        </a>

        <a href="javascript:;" class="btn large bg-google">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-google-plus"></i>
            </span>
            <span class="button-content">
                Google
            </span>
        </a>

        <a href="javascript:;" class="btn x-large bg-google">
            <span class="glyph-icon icon-separator">
                <i class="glyph-icon icon-google-plus"></i>
            </span>
            <span class="button-content">
                Google
            </span>
        </a>

    </div>

    

</div>


<h3>
    Dashboard buttons
</h3>
<p class="font-gray-dark">
    You can create unique style vertical icon buttons using the core helper classes for color, icon size, background, spacing, etc.
</p>
<div class="example-box">
    <div class="example-code">

        <div class="content-box remove-border dashboard-buttons clearfix">
            <a href="javascript:;" class="btn vertical-button hover-blue-alt" title="">
                <span class="glyph-icon icon-separator-vertical small radius-all-2 bg-yellow">
                    <i class="glyph-icon icon-dashboard opacity-80 radius-all-100 font-size-20"></i>
                </span>
                <span class="button-content">Dashboard</span>
            </a>
            <a href="javascript:;" class="btn vertical-button hover-green" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-tags opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Widgets</span>
            </a>
            <a href="javascript:;" class="btn vertical-button hover-orange" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-reorder opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Tables</span>
            </a>
            <a href="javascript:;" class="btn vertical-button hover-purple" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-bar-chart opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Charts</span>
            </a>
            <a href="javascript:;" class="btn vertical-button hover-yellow" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-laptop opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Buttons</span>
            </a>
            <a href="javascript:;" class="btn vertical-button hover-azure" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-code opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Panels</span>
            </a>
            <a href="javascript:;" class="btn vertical-button hover-blue" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-picture opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Themes</span>
            </a>
        </div>

        <div class="content-box remove-border dashboard-buttons clearfix">
            <a href="javascript:;" class="btn vertical-button remove-border bg-blue-alt" title="">
                <span class="glyph-icon icon-separator-vertical small radius-all-2 bg-yellow">
                    <i class="glyph-icon icon-dashboard opacity-80 radius-all-100 font-size-20"></i>
                </span>
                <span class="button-content">Dashboard</span>
            </a>
            <a href="javascript:;" class="btn vertical-button remove-border bg-green" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-tags opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Widgets</span>
            </a>
            <a href="javascript:;" class="btn vertical-button remove-border bg-orange" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-reorder opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Tables</span>
            </a>
            <a href="javascript:;" class="btn vertical-button remove-border bg-purple" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-bar-chart opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Charts</span>
            </a>
            <a href="javascript:;" class="btn vertical-button remove-border bg-yellow" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-laptop opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Buttons</span>
            </a>
            <a href="javascript:;" class="btn vertical-button remove-border bg-azure" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-code opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Panels</span>
            </a>
            <a href="javascript:;" class="btn vertical-button remove-border bg-blue" title="">
                <span class="glyph-icon icon-separator-vertical pad0A medium">
                    <i class="glyph-icon icon-picture opacity-80 font-size-20"></i>
                </span>
                <span class="button-content">Themes</span>
            </a>
        </div>

    </div>

    

</div>



                	</div><!-- #page-content -->
            </div><!-- #page-main -->
        </div><!-- #page-wrapper -->

    </body>
</html>
